import React, { Component } from 'react'

export default class App extends Component {
  state = {
    shopcartList: [
      {
        id: '1001',
        name: '曲奇饼干',
        price: 5.6,
        num: 1
      },
      {
        id: '1002',
        name: '海南叶子奶',
        price: 15.8,
        num: 1
      }
    ]
  }
  increment=(idx)=>{
    //这种做法只更改了state中的数据，但是并没有更新页面,如下这种方法虽然可以解决问题，但是已经了react更新数据的机制
    //从理论上了不推荐大家使用
    //this.state.shopcartList[idx].num++
    //手动更新页面
    //this.forceUpdate()
    let {shopcartList}=this.state
    //更改shopcartList中的数据
    shopcartList[idx].num++
    //然后再通过setState的方式更改数据
    this.setState(()=>{return{shopcartList}})
  }
  render() {
    return (
      <div>
        <table>
          <thead>
            <tr>
              <td>编号</td>
              <td>商品</td>
              <td>价格</td>
              <td>数量</td>
              <td>小计</td>
            </tr>
          </thead>
          <tbody>
            {
              this.state.shopcartList.map((item, index) => <tr key={item.id}>
                <td>{item.id}</td>
                <td>{item.name}</td>
                <td>{item.price}</td>
                <td>
                  <button>-</button>
                  <span>{item.num}</span>
                  <button onClick={()=>{this.increment(index)}}>+</button>
                </td>
                <td>
                  {Math.ceil(item.price*item.num)}
                </td>
              </tr>)
            }
            <tr>
              <td colSpan={5}>
                  {Math.ceil(this.state.shopcartList.reduce((pre,cur)=>pre+cur.price*cur.num,0))}
              </td>
            </tr>
          </tbody>
        </table>
      </div>
    )
  }
}
